<!--
 * @Description: 登录主页面
 * @Autor: 田力源
 * @Date: 2023-02-17 15:56:09
 * @LastEditors: 田力源
 * @LastEditTime: 2023-02-17 15:56:26
-->
<template>
    <div class="login">
        <div class="login-box">
            <h2>登录</h2>
            <div class="username">
                <span class="text">用户名</span>
                <div class="input">
                    <i class="iconfont icon-yonghu"></i>
                    <input type="text" class="seach-content" v-model="userinfo.username">
                </div>
            </div>
            <div class="password">
                <span class="text">密码</span>
                <div class="input">
                    <i class="iconfont icon-mima"></i>
                    <input type="password" class="seach-content" v-model="userinfo.password" v-if="!showPassword">
                    <input type="text" class="seach-content" v-model="userinfo.password" v-else>
                    <i class="iconfont" :class="showPassword ? 'icon-icon-test' : 'icon-icon-test1'"
                        @click="showPassword = !showPassword"></i>
                </div>
            </div>
            <div class="submit" @click="loginSubmit">登录</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { login } from '@/api/user'
import { userlike } from '@/api/article'
import { ElMessage } from 'element-plus'
import router from '@/router';
import { useUserStore } from '@/store/index';
// 密码显隐
const showPassword = ref(false)
const userinfo = reactive({
    username: '',
    password: ''
})
const user = useUserStore();
const loginSubmit = () => {
    login({ ...userinfo }).then((res: any) => {
        if (res.code !== 200) return ElMessage.error(res.msg || '登陆失败')
        // 获取到token，储存到local里
        window.localStorage.setItem('userinfo', res.data.token);
        user.changeLogin(true)
        user.setUserInfo(res.data)
        ElMessage({
            message: '登陆成功',
            type: 'success',
        })
        // 发起请求获取用户like列表
        // 获取用户点赞信息
        userlike(user.userInfo.id).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.msg || '获取用户喜欢列表失败')
            const { data } = res
            for (let key in data) {
                data[key] ? data[key] = JSON.parse(data[key]) : '';
            }
            user.setUserLike(data)
        })
        router.push(`/`)
    })
}
</script>

<style scoped lang="scss">
.login-box {
    margin: 100px auto;
    width: 900px;
    height: 600px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    color: #333;

    h2 {
        padding-top: 60px;
        font-size: 36px;
        text-align: center;
        letter-spacing: 10px;
    }

    .username,
    .password {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 80px;

        .text {
            font-weight: bold;
            font-size: 20px;
            margin-right: 50px;
        }
    }

    .password .text {
        letter-spacing: 20px;
        margin-right: 30px;
    }

    .input {
        input::-ms-clear {
            display: none;
        }

        input::-ms-reveal {
            display: none;
        }

        position: relative;
        width: 550px;

        .icon-yonghu,
        .icon-mima {
            color: #ccc;
            font-size: 25px;
            position: absolute;
            left: 15px;
            top: 10px;
        }

        .icon-icon-test,
        .icon-icon-test1 {
            color: #ccc;
            font-size: 25px;
            position: absolute;
            right: 15px;
            top: 10px;
            cursor: pointer;

            &:hover {
                color: #333;
            }
        }

        .seach-content {
            width: 450px;
            height: 40px;
            border-radius: 20px;
            border: none;
            box-shadow: 0 0 3px rgb(0, 0, 0, 0.3);
            padding-left: 50px;
            padding-right: 50px;
            font-size: 20px;
            color: #333;
            outline: none;
            transition: box-shadow .3s;

            &:focus {
                border: none;
                box-shadow: 0 0 3px rgb(0, 0, 0, 0.7);
            }
        }

    }

    .submit {
        width: 140px;
        height: 50px;
        margin: 80px auto 0;
        cursor: pointer;
        background-color: rgb(255, 204, 0);
        color: #fff;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        border-radius: 6px;
    }
}
</style>